<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
//定义一个总的高度变量	
 var totalheight = 0;   

 function loaddata()
 { 
 	//浏览器的高度加上滚动条的高度 
     totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
 	//当文档的高度小于或者等于总的高度的时候，开始动态加载数据
 	
     if ($(document).height() <= totalheight)     
     { 
         //加载数据
        pNo++;
		scrollPage(globalChnId,pNo);
     } 
 	
 } 

 $(window).scroll( function() { 
     loaddata();
 }); 

//定义上下文
var jsCtx="http://10.0.2.2:8080/dwcms/";

function showLoading(){
	$.mobile.loadingMessageTextVisible = true;
	$.mobile.showPageLoadingMsg("b", "加载中..." );
	} 
function hideLoading(){
	$.mobile.hidePageLoadingMsg();
	} 	
//滚动加载数据
var hadLoad=false;
var pNo=1;
var globalChnId=61;
function scrollPage(chnId,pgNo){
		showLoading();
    	//加载数据
	   	$.ajax({
        type: "GET",
        async: true,
        url: jsCtx+"api/content/v_list.do",
        data:{channelId:chnId,pageNo:pgNo},
        dataType: "json",
        success: function(data){
        	var newslist=data.list;
        	if(pgNo>data.page.totalPage){
        		pNo=data.page.totalPage;
        	}
        	if(pNo==data.page.totalPage&&!hadLoad){
            	for(var i=0;i<newslist.length;i++){
    	        	$("#researchlist").append("<li><a href='detail.html?contentId="+newslist[i].contentId+"'  data-ajax='false' data-transition='slide'><h2>"+newslist[i].title+"</h2><p>"+newslist[i].description+"</p></a></li>");
            	}
            	hadLoad=true;
            	$('#researchlist').listview('refresh');        		
        	}else if(pNo<data.page.totalPage){
            	for(var i=0;i<newslist.length;i++){
    	        	$("#researchlist").append("<li><a href='detail.html?contentId="+newslist[i].contentId+"'  data-ajax='false' data-transition='slide'><h2>"+newslist[i].title+"</h2><p>"+newslist[i].description+"</p></a></li>");
            	}
            	$('#researchlist').listview('refresh');           		
        	}
        	hideLoading()
        },
        error:function(XMLHttpRequest, textStatus, errorThrown){
       	 alert("新闻列表数据加载失败~！");
        }
    });		
	
}
var CHNID_JAVA=61;
var CHNID_ANDROID=62;
var CHNID_HTML5=50;
function loadResearch(chnId){
	globalChnId=chnId;
	pNo=1;
	hadLoad=false;
   	$.ajax({
        type: "GET",
        async: false,
        url: jsCtx+"api/content/v_list.do",
        dataType: "json",
        data:{channelId:globalChnId,pagaNo:pNo},
        success: function(data){
        	var newslist=data.list;
        	$("#researchlist").empty();
        	for(var i=0;i<newslist.length;i++){
	        	$("#researchlist").append("<li><a href='detail.html?contentId="+newslist[i].contentId+"'  data-ajax='false' data-transition='slide' onclick='loadDetail("+newslist[i].contentId+")'><h2>"+newslist[i].title+"</h2><p>"+newslist[i].description+"</p></a></li>");
        	}
        	$('#researchlist').listview('refresh');
        },
        error:function(XMLHttpRequest, textStatus, errorThrown){
       	 alert("学院研究数据列表加载失败!");
        }
    });	 	
}

$(function(){  
	loadResearch(globalChnId);
});   
</script>
</head>
<body>
<!--学院研究页-->
<div data-role="page" id="research">
  <div data-role="header">
    <a href="../index.html#home" data-ajax="false" data-role="button" data-icon="home" data-transition="slide" data-direction="reverse">首页</a>
    <h1>学院研究</h1>
    <a href="#home" data-role="button" data-icon="back" data-rel="back" data-transition="slide" data-direction="reverse">返回</a>
    <div data-role="navbar">
      <ul>
        <li><a href="#" onclick="loadResearch(CHNID_JAVA);">Java</a></li>
        <li><a href="#" onclick="loadResearch(CHNID_ANDROID);">Android</a></li>
        <li><a href="#" onclick="loadResearch(CHNID_HTML5);">HTML5</a></li>
       </ul>
    </div>
  </div>
  <div data-role="content">
    <ul data-role="listview" id="researchlist">
      <li>
        <a href="#detail"  data-transition="slide">
         <h1>新闻研究</h1>
         <p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
        </a>
      </li>
      <li>
        <a href="#detail"  data-transition="slide">
         <h1>新闻研究</h1>
         <p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
        </a>
      </li>
      <li>
        <a href="#detail"  data-transition="slide">
         <h1>新闻研究</h1>
         <p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
        </a>
      </li>
     </ul>
  </div>
  <div data-role="footer">
     <h1>多维矩阵工作室</h1>
  </div>
</div>

</body>
</html>
